<template>
  <div class="app-container">
    <div class="main-container">
      <div class="page-header">
          <router-link to="/main/biao/wailai" class="back-btn">
            <i class="el-icon-arrow-left"></i> 返回</router-link>
        <div class="left-section">
          <h2 class="page-title">外来文件登记列表</h2>
        </div>
        <div class="right-section">
          <router-link to="/main/biao/wailai">
            <el-button type="primary" icon="el-icon-plus">新增文件</el-button>
          </router-link>
        </div>
      </div>

      <div class="content-wrapper">
        <div class="filter-container">
          <el-input
            v-model="listQuery.keyword"
            placeholder="请输入文件编号/名称/提供单位"
            class="filter-item search-input"
            @keyup.enter.native="handleFilter"
            clearable
          >
            <el-button slot="append" icon="el-icon-search" @click="handleFilter"></el-button>
          </el-input>
        </div>

        <el-card class="table-card" shadow="hover">
          <el-table
            v-loading="listLoading"
            :data="list"
            border
            stripe
            highlight-current-row
            :header-cell-style="tableHeaderStyle"
            :cell-style="tableCellStyle"
          >
            <el-table-column align="center" label="序号" width="80" type="index" :index="indexMethod">
            </el-table-column>
            <el-table-column label="文件编号" prop="fileNumber" min-width="120" align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="文件类型" prop="fileCategory" min-width="120" align="center">
              <template slot-scope="{row}">
                <el-tag :type="getFileCategoryType(row.fileCategory)">
                  {{ formatFileCategory(row.fileCategory) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="文件名称" prop="fileName" min-width="180" align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="提供单位" prop="provider" min-width="150" align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="初审部门" prop="preReviewDepartment" min-width="120" align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="分发部门" prop="distributionDepartment" min-width="120" align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="版本" prop="fileVersion" width="100" align="center">
            </el-table-column>
            <el-table-column label="备注" prop="remarks" min-width="150" align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="操作" align="center" width="280" fixed="right">
              <template slot-scope="{row}">
                <el-button type="primary" size="mini" icon="el-icon-edit" @click="handleUpdate(row)">
                  编辑
                </el-button>
                <el-button type="success" size="mini" icon="el-icon-view" @click="handleView(row)">
                  查看
                </el-button>
                <el-button type="danger" size="mini" icon="el-icon-delete" @click="handleDelete(row)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <div class="pagination-container">
            <pagination
              v-show="total>0"
              :total="total"
              :page.sync="listQuery.current"
              :limit.sync="listQuery.size"
              @pagination="getList"
            />
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import { getExternalFileList, deleteExternalFile } from '@/api/externalFile'
import Pagination from '@/components/Pagination'

export default {
  name: 'WailaiList',
  components: { Pagination },
  data() {
    return {
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        current: 1,
        size: 10,
        keyword: ''
      },
      tableHeaderStyle: {
        background: '#f5f7fa',
        color: '#303133',
        fontWeight: '600',
        height: '50px',
        padding: '0',
        textAlign: 'center'
      },
      tableCellStyle: {
        padding: '8px 0',
        textAlign: 'center'
      },
      fileCategoryMap: {
        government: { label: '政府提供', type: 'success' },
        customer: { label: '客户提供', type: 'primary' },
        supplier: { label: '供应商提供', type: 'warning' },
        other: { label: '其他途径', type: 'info' }
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      getExternalFileList(this.listQuery).then(response => {
        this.list = response.data.records
        this.total = response.data.total
        this.listLoading = false
      })
    },
    handleFilter() {
      this.listQuery.current = 1
      this.getList()
    },
    handleUpdate(row) {
      this.$router.push(`/main/biao/wailai?id=${row.id}&type=edit`)
    },
    handleView(row) {
      this.$router.push(`/main/biao/wailai?id=${row.id}&type=view`)
    },
    handleDelete(row) {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteExternalFile(row.id).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getList()
        })
      })
    },
    indexMethod(index) {
      return (this.listQuery.current - 1) * this.listQuery.size + index + 1
    },
    formatFileCategory(category) {
      return this.fileCategoryMap[category]?.label || '未知类型'
    },
    getFileCategoryType(category) {
      return this.fileCategoryMap[category]?.type || 'info'
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
  // background-color: #f0f2f5;
  min-height: 100vh;
}

.main-container {
  max-width: 1200px;
  margin: 0 auto;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  background-color: #fff;
  padding: 16px 24px;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);

  .page-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #303133;
  }
}

.content-wrapper {
  background-color: transparent;
}

.filter-container {
  margin-bottom: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .search-input {
    width: 360px;
  }

  .filter-item {
    margin-right: 10px;
  }
}

.table-card {
  margin-bottom: 20px;
  border-radius: 4px;

  :deep(.el-card__body) {
    padding: 20px;
  }
}

.pagination-container {
  padding: 20px 0 0;
  text-align: right;
}

:deep(.el-table) {
  border-radius: 4px;
  
  &::before {
    display: none;
  }

  .el-table__header-wrapper {
    border-radius: 4px 4px 0 0;
  }
}

:deep(.el-button) {
  padding: 8px 15px;
  margin-left: 8px;

  [class*="el-icon-"] + span {
    margin-left: 4px;
  }

  &.el-button--mini {
    padding: 7px 12px;
  }
}

:deep(.el-input) {
  .el-input__inner {
    border-radius: 4px;
  }
}

:deep(.el-pagination) {
  padding: 0;
  margin-top: 20px;
}
</style> 